<template>
  <div>
    <div class="flexDiv" style="margin-bottom: 6px">
      <div class="form-title">事件列表：</div>
      <div v-if="showParams">
        <el-button
          type="text"
          icon="el-icon-close"
          @click="goback"
          style="color: black"
        ></el-button>
      </div>
    </div>
    <div class="flexDiv" v-if="showParams" style="margin-top: -10px">
      <el-form :inline="true">
        <el-form-item label="单元名称：" style="width: 260px">
          <a style="font-weight: 400">{{ eventParams.eventName }}</a>
        </el-form-item>
        <el-form-item label="触发时间：" style="width: 260px">
          <a style="font-weight: 400"
            >{{ Math.ceil(eventParams.eventTime / 60) }}分钟</a
          >
        </el-form-item>
        <el-form-item label="等待时间：" style="width: 260px">
          <a style="font-weight: 400"
            >{{ Math.ceil(eventParams.waitTime / 60) }}分钟</a
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="eventData"
      style="width: 98%"
      class="tableBox"
      stripe
      height="calc(100vh - 420px)"
      v-if="!showParams"
      key="1"
    >
      <!-- height="360" -->
      <el-table-column label="序号" prop="index" width="55" align="center">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="eventName" label="事件单元" align="center">
      </el-table-column>
      <el-table-column
        prop="eventTime"
        label="触发时间"
        align="center"
        width="120"
        ><template slot-scope="scope">
          {{ Math.ceil(scope.row.eventTime / 60) }} 分钟
        </template>
      </el-table-column>
      <el-table-column
        prop="waitTime"
        label="等待时间"
        align="center"
        width="120"
        ><template slot-scope="scope">
          {{ Math.ceil(scope.row.waitTime / 60) }} 分钟
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="eventDetail(scope.row)"
            >查看详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 查看详情，参数列表 -->
    <el-table
      v-else
      :data="paramsData"
      style="width: 98%"
      class="tableBox"
      stripe
      height="calc(100vh - 480px)"
      key="2"
    >
      <!-- height="296" -->
      <el-table-column label="序号" prop="index" width="55" align="center">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="remarks" label="参数元素" align="center">
      </el-table-column>
      <el-table-column prop="upOrigin" label="起始数值" align="center"
        ><template slot-scope="scope"> {{ scope.row.upOrigin }} ℃</template>
      </el-table-column>
      <el-table-column prop="downTarget" label="目标数值" align="center">
        <template slot-scope="scope"> {{ scope.row.downTarget }} ℃</template>
      </el-table-column>
      <el-table-column prop="funShow" label="执行函数" align="center">
      </el-table-column>
      <el-table-column prop="downOperTime" label="执行时间" align="center">
        <template slot-scope="scope"> {{ scope.row.downOperTime }} 秒</template>
      </el-table-column>
    </el-table>
    <div style="text-align: right; margin: 6px" v-if="showParams">
      <el-button
        type="primary"
        plain
        size="mini"
        @click="nextStep"
        style="width: 80px"
        >下一步</el-button
      >
    </div>
  </div>
</template>

<script>
import { eventList, practiceDetailList } from "@/api/emergency/script";
export default {
  // props: ["facId", "pracId"],
  props: ["object"],
  // props: {
  //   object: {
  //     type: Object,
  //   },
  // },
  data() {
    return {
      // pracId: "", // 路由传参演习id
      eventData: [], // 事件列表
      activeName: "1", // tab切换
      detailInfo: "", //详情信息
      facilityData: [], // 堆芯数据
      total: 0,
      tabName: 1,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      paramsData: [], // 参数列表数据
      showParams: false,
      eventParams: {
        eventName: "",
        eventTime: "",
        waitTime: "",
      },
    };
  },
  created() {
    this.getEventList();
  },
  mounted() {},
  methods: {
    // 获取演习对应的事件
    getEventList() {
      // const params = {
      //   ...this.object,
      // };
      // eventList(params).then((res) => {
      this.$axios
        .get("/static/emergency/practice/eventList.json")
        .then((res) => {
          this.eventData = res.data.data;
        });
    },
    eventDetail(row) {
      // console.log(row, "======================");
      this.showParams = true;
      this.eventParams = {
        eventName: row.eventName,
        eventTime: row.eventTime,
        waitTime: row.waitTime,
      };
      // practiceDetailList({ eventId: row.id }).then((res) => {
      let str = "/static/emergency/practice/eventDetail" + row.id + ".json";
      this.$axios.get(str).then((res) => {
        console.log(res, "=====");
        if (res.data.rows != []) {
          // 处理-执行函数的显示样式
          res.data.rows.forEach((element) => {
            if (element.downFunc.indexOf(";") == -1) {
              console.log("一个函数");
              element.funShow = element.downFunc;
            } else {
              element.downFunc = element.downFunc.substring(
                0,
                element.downFunc.length - 1
              ); // 删除最后一个无用的；
              let item = element.downFunc.split(";");
              console.log("item", item);
              let functions = "";
              for (let i = 0; i < item.length; i++) {
                let itemitem = item[i].split(",");
                functions = functions + "Y=" + itemitem[0] + ";";
              }
              element.funShow = functions;
            }
          });
        }
        this.paramsData = res.data.rows;
      });
    },
    // 子组件修改父组件的值实现切换step
    nextStep() {
      this.$emit("changeStepActive", 2);
    },
    goback() {
      this.showParams = false;
    },
  },
};
</script>

<style scoped lang="scss">
// title
.title {
  height: 40px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: bold;
  padding: 4px 10px 20px 10px;
  .title-name {
    width: 80px;
  }
  .title-refresh {
    width: 70px;
    color: #1890ff;
    text-align: right;
    padding-right: 15px;
  }
}
.right-title {
  height: 40px;
  font-size: 14px;
  margin-left: 40px;
}

// el-form
::v-deep .el-form {
  height: 55px;
  padding: 10px;
  .el-form-item__label {
    font-size: 14px;
    font-weight: bold;
    color: black;
  }
}
// ::v-deep .el-input__inner {
//   width: 200px;
//   height: 28px;
//   font-size: 14px;
// }
.el-button {
  height: 28px;
  width: 64px;
  font-size: 14px;
  line-height: 5px;
}
.card-box {
  padding: 0px;
  // margin-bottom: 20px;
}
// right-left
.card-left {
  width: 40%;
  height: 600px;
  // background-color: rgb(124, 66, 66);
}

.card-title {
  padding-left: 10px;
  margin: 6px 0px;
  font-size: 16px;
  font-weight: bold;
}
.flexDiv {
  display: flex;
  justify-content: space-between;

  .card-time {
    padding-left: 20px;
    margin: 6px 0px;
    font-size: 14px;
    line-height: 24px;
  }
}
::v-deep .el-card__body {
  width: 100%;
}
::v-deep .el-input__inner {
  // width: 200px;
  height: 28px;
  font-size: 14px;
}
.form-title {
  margin-left: 8px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: bold;
}
.content-card {
  height: 500px;
  // width: 300px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  .left-step {
    // width: 300px;
    height: 100%;
    width: 20%;
    // background-color: rgb(134, 110, 110);
  }
  .right-content {
    // width: 900px;
    margin-left: 2%;
    width: 78%;
    height: 100%;
  }
}
// table
::v-deep .el-table {
  height: 460px;
  border: 0;
  padding-left: 10px;
  th,
  tr,
  td {
    border: 0;
  }
  &::before {
    height: 0px;
  }
  &::after {
    width: 0;
  }
  .el-table__fixed:before {
    height: 0;
  }
  // 去掉表格下划线
  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 40px;
    color: black;
    font-size: 14px;
  }
  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 40px;
  }
  // 去掉表头下划线
  thead tr th.is-leaf {
    border: 0px solid #ebeef5;
    border-right: none;
  }
}
</style>
